<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style>
        body {
            font-size: 18px;
            color: linen;
            background-color: #fff;
            padding: 0;
            margin: 0;
        }

        p {
            margin: 0;
            padding: 20px;
            text-align: center;
        }

        .hd,
        .ft {
            width: 100%;
            background-color: #c0c0c0;
        }

        .bd-lft,
        .bd-rgt,
        .bd-3-lr,
        .bd-3-ll,
        .bd-3-rr {
            zoom: 1;
            overflow: hidden;
            margin: 10px 0;

        }

        .main {
            width: 100%;
            background-color: linen;
            /* 使左右等高 */
            /* padding-bottom: 10000px;
            margin-bottom: -10000px; */

        }

        .main .main-wrap {
            background-color: #ff80ff;
            /* 使左右等高 */
            padding-bottom: 10000px;
            margin-bottom: -10000px;
           
        }
        .aside,
        .aside1,
        .aside2 {
            width: 200px;
            background-color: #ff00ff;
            /* 使左右等高 */
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }

        .col {
            float: left;
            /* 使左右等高 */
            /* padding-bottom: 20000px;
            margin-bottom: -20000px; */
        }

        .bd-lft .main-wrap {
            margin-left: 210px;
        }

        .bd-lft .aside {
            margin-left: -100%;
        }

        .bd-rgt .main-wrap {
            margin-right: 210px;
        }

        .bd-rgt .aside {
            margin-left: -200px;
        }

        .bd-3-lr .main-wrap {
            margin: 0 210px;
            /* 使左右等高 */
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }

        .bd-3-lr .aside1 {
            margin-left: -100%;
        }

        .bd-3-lr .aside2 {
            margin-left: -200px;
        }

        .bd-3-ll .main-wrap {
            margin-left: 420px;
        }

        .bd-3-ll .aside1 {
            margin-left: -100%;
        }

        .bd-3-ll .aside2 {
            margin-left: calc(-100% + 210px);
        }

        .bd-3-rr .main-wrap {
            margin-right: 420px;
        }

        .bd-3-rr .aside1 {
            margin-left: -410px;
        }

        .bd-3-rr .aside2 {
            margin-left: -200px;
        }
    </style>
</head>

<body>
    <div class="hd">
        <p>我是头部</p>
    </div>
    <div class="bd-lft">
        <div class="main col">
            <div class="main-wrap">
                <p>我是右侧自适应栏</p>
                <p>我是右侧自适应栏</p>
                <p>我是右侧自适应栏</p>
            </div>
        </div>
        <div class="aside col">
            <p>我是定宽左侧边栏</p>
        </div>
    </div>

    <div class="bd-rgt">
        <div class="main col">
            <div class="main-wrap">
                <p>我是左侧自适应栏</p>
            </div>
        </div>
        <div class="aside col">
            <p>我是定宽右侧边栏</p>
            <p>我是定宽右侧边栏</p>
            <p>我是定宽右侧边栏</p>
        </div>
    </div>

    <div class="bd-3-lr">
        <div class="main col">
            <div class="main-wrap">
                <p>我是左侧自适应栏</p>
                <p>我是左侧自适应栏</p>
                <p>我是左侧自适应栏</p>
            </div>
        </div>
        <div class="aside1 col">
            <p>我是定宽左侧边栏</p>
            <p>我是左侧自适应栏</p>
        </div>
        <div class="aside2 col">
            <p>我是定宽右侧边栏</p>
            <p>我是左侧自适应栏</p>
            <p>我是左侧自适应栏</p>
        </div>
    </div>

    <div class="bd-3-ll">
        <div class="main col">
            <div class="main-wrap">
                <p>我是左侧自适应栏</p>
                <p>我是左侧自适应栏</p>
                <p>我是左侧自适应栏</p>
            </div>
        </div>
        <div class="aside1 col">
            <p>我是定宽左侧边栏</p>
            <p>我是左侧自适应栏</p>
        </div>
        <div class="aside2 col">
            <p>我是定宽右侧边栏</p>
            <p>我是左侧自适应栏</p>
        </div>
    </div>

    <div class="bd-3-rr">
        <div class="main col">
            <div class="main-wrap">
                <p>我是左侧自适应栏</p>
                <p>我是左侧自适应栏</p>
            </div>
        </div>
        <div class="aside1 col">
            <p>我是定宽左侧边栏</p>
            <p>我是左侧自适应栏</p>
        </div>
        <div class="aside2 col">
            <p>我是定宽右侧边栏</p>
            <p>我是左侧自适应栏</p>
            <p>我是左侧自适应栏</p>
        </div>
    </div>
    <div class="ft">
        <p>我是尾部</p>
    </div>
</body>

</html>